<template>
  <div id="agreementlist" > 


          <el-table :data="list" style="width: 100%" :row-class-name="tableRowClassName" 
           :border="true" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
          >

               
                <el-table-column label="标题"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="操作" align='center' >
                    <template slot-scope="scope">
                        <el-button size="mini"  type="primary"  plain @click="xg_but(scope.row)" class="button_class1">修改</el-button> 
                        <el-button size="mini"  type="primary"  plain @click="delect_but(scope.row)" class="button_class2">删除</el-button> 
                    </template>
                </el-table-column>

            </el-table>  


    <el-dialog title="修改信息" :visible.sync="xg_mtk"  width="800px" >
          <el-form ref="form" :model="formlist"  label-width="100px" style="width:100%;">
                <el-form-item label="标题">
                    <el-input v-model="formlist.title" placeholder="必填"></el-input>
                </el-form-item> 
                   <el-form-item label-width="100px" label="类型" >
                    <el-select  v-model="formlist.select_num" placeholder="请选择用户类别">
                        <el-option  v-for="(item,index) in select_data" :key="index" :label="item.title" :value="item.val"></el-option>
                    </el-select>
                  </el-form-item>

             <!-- 富文本选取图片 -->
                <el-form-item label="详情" style="">
                    <div style="">
                        <quill-editor class="editor"
                            v-model="formlist.content" 
                            ref="myQuillEditor" 
                            :options="editorOption" 
                            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                            @change="onEditorChange($event)" style="height:300px;margin-bottom:100px;">
                        </quill-editor>
                    </div>
                </el-form-item>
            <!-- 富文本选取图片 -->
            <el-form-item label="" v-show="false" >  
                <el-upload                                                
                    action="uploadUrl"  
                    :show-file-list="false"   
                    :before-upload="beforeupload"
                    :http-request="ImgUploadSectionFile">
                        <el-button slot="trigger" size="small" type="primary" id="selectImg">选取文件</el-button>
                </el-upload>
            </el-form-item>

         

         </el-form>
          <div style="text-align: center;width:80%;margin:auto;">
                  <el-button type="primary" style="width:70%;" class="custom_color_button" @click="xg_but_qr">确认</el-button>
          </div>

   </el-dialog>  


   </div>
</template>

<script>
import toolbarOptions from '@/assets/js/quillConfig.js'
export default {
   name: 'agreementlist',
   props:{
      list:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        xg_mtk:false,
        my_id:'',
        formlist:{
            content:'',
            upfile:'',
            title:'',
            select_num:''
        },
        select_data:[],
        editorOption: {//富文本
          modules: {
            toolbar: {
              container: toolbarOptions,  // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // alert('自定义图片')
                    document.getElementById("selectImg").click();    //调用选择图片
                    
                  } else {
                   // this.quill.format('image', false);
                  }
                }
              }
            }
           }       
        },
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 293
      
  },
  mounted (){
      this.type_fun()
  },
  methods: {
     type_fun(){
          this.post("/agreement/listOfType", {
             
	        }).then(res => {
     
            this.select_data = res.result
            //console.log(res,"ddd")
         })
      },
     xg_but(row){
         this.my_id = ''
         this.xg_mtk = true
         this.my_id = row.id
         this.formlist.content = row.content
         this.formlist.title = row.title
         this.formlist.select_num = row.type
     },
     xg_but_qr(){
         this.post("/agreement/update", {
                title:this.formlist.title,
                content:this.formlist.content,
                type:this.formlist.select_num,
                id:this.my_id
            }).then(res => {

                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                    this.$emit('up_list_fun')
                    this.xg_mtk = false
                }else {
                this.open1(res.message,'warning')
            }

        })
     },
     delect_but(row){
          this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
            this.post("/agreement/delete", {
                   id:row.id
                }).then(res => {
                    if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
    
                    this.$emit('up_list_fun')
                    }else {
                    this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
        //   this.$message({
        //     type: 'info',
        //     message: '已取消解冻'
        //   });          
        });
     },
    ImgUploadSectionFile(param){//图片上传    
     },
      beforeremove(){
          return false
      },
      onEditorBlur(){ //富文本
     },
     onEditorFocus(){//富文本获得焦点事件
     },
     onEditorChange(){//富文本内容改变事件
      //console.log(this.xg_school.content)
     },
     beforeupload(file){   //重新写入上穿 需要点击确认上传与表单一起提交
           if(this.upimglx(file) == false){  //判断是否为fales
              this.upimglxtitle()  //执行弹出错误             
              return false
            }            
            this.upimgpost("/image/uploadMultiple",file).then(res => {
            this.formlist.upfile = res.result.url   
            this.formlist.content = this.formlist.content +'<img src="'+  this.urlimg + this.formlist.upfile +'"/>'

           })

          return false;
      },



  }
}
</script>


<style scoped>
.fwb_wj{
   /* display: -webkit-box; */
    /* height: 300px; */
    overflow: hidden;
    white-space:nowrap; 
    text-overflow:ellipsis; 
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fwb_wj>>>img{ 
    width: 30px;
    height:30px;
    display: inline-block;
}
.avatar-uploader  {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
</style>